JS - element properties - childNodes

revision:


returns a NodeList of an element's child nodes.

top

The property returns a collection (list) of an elements's child nodes, i.e. a NodeList object and is read-only.

"childNodes[0]" is the same as firstChild.

Syntax:

element.childNodes : a NodeList object collection of nodes. The nodes are sorted as they appear in the document.

property value:

none :

example

DIV2's child nodes are :

number of child nodes in DIV2 :

            <div>
                <p>DIV2's child nodes are : <span id="prop7"></span></p>
                <p>number of child nodes in DIV2 : <span id="prop8"></span></p>
            </div>
            <script>
                const nodeList = document.getElementById("DIV2").childNodes;
                let text1 = "";
                for (let i = 0; i < nodeList.length; i++) {
                    text1 += nodeList[i].nodeName + " , ";
                }
                document.getElementById("prop7").innerHTML = text1;
                const element = document.getElementById("DIV2");
                let numb2 = element.childNodes.length;
                document.getElementById("prop8").innerHTML = numb2;
            </script>
        

First p element

Second p element

Add a background color to the second child node of the div.

Whitespace inside elements is considered text nodes. In this example, index 0, 2 and 4 in myDIV are text nodes.

            <div>
                <div id="DIV3">
                    <p>First p element</p>
                    <p>Second p element</p>
                </div>
                <p>Add a background color to the second child node of the div.</p>
                <p>Whitespace inside elements is considered text nodes. In this example, 
                index 0, 2 and 4 in myDIV are text nodes.</p>
            </div>
            <style>
               #DIV3{border: 1px solid black; margin: 5px;}
            </style>
            <script>
                document.getElementById("DIV3").childNodes[1].style.backgroundColor = "yellow";
            </script>